<!--
 * @Author: 罗微
 * @Date: 2020-09-22 15:46:57
 * @LastEditors: 岸舟
 * @LastEditTime: 2020-09-23 20:24:01
 * @Description: 
-->
<template>
<div class="sector">
    <div id="box">
        <el-card class="box-card" v-for="item in myCompensations" :key="item._id">
            <div class="text item">
                <div class="text-left">
                    <span>销售员:</span>
                </div>
                <div class="text-left">
                    <span>{{belongAdmin}}</span>
                </div>
            </div>
            <div class="text item">
                <div class="text-left">
                    <span>客户：</span>
                </div>
                <div class="text-left">
                    <span>{{account}}</span>
                </div>
            </div>
            <div class="text item">
                <div class="text-left">
                    <span>保险开始时间：</span>
                </div>
                <div class="text-left">
                    <span>{{item.dueTime}}</span>
                </div>
            </div>
            <div class="text item">
                <div class="text-left">
                    <span>状态：</span>
                </div>
                <div class="text-left">
                    <span v-if="item.status==0">异常</span>
                    <span v-if="item.status==1">正常理赔状态(未处理)</span>
                    <span v-if="item.status==8">同意理赔</span>
                    <span v-if="item.status==9">拒绝理赔</span>
                </div>
            </div>
            <div class="bottom">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delClaim(item._id)"></el-button>
            </div>
        </el-card>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            id: "",
            myCompensations: [],
            account: "",
            belongAdmin: "",
        };
    },
    created() {
        this.getInsureOrder();
    },
    methods: {
        async getInsureOrder() {
            //根据用户_id获取该用户所有订单
            this.id = this.$route.params._id;
            try {
                const {
                    data
                } = await this.$apis.claimApi.getCompensations(this.id);
                this.myCompensations = data.data.getClaimOrder;
                this.account = data.data.account;
                this.belongAdmin = data.data.belongAdmin;
            } catch (error) {
                console.log('该用户无理赔订单')
            }
        },
        created() {
            this.getInsureOrder();
        },
        methods: {
            async getInsureOrder() {
                //根据用户_id获取该用户所有订单
                this.id = this.$route.params._id;
                try {
                    const {
                        data
                    } = await this.$apis.claimApi.getCompensations(this.id);
                    this.myCompensations = data.data.getClaimOrder;
                    this.account = data.data.account;
                    this.belongAdmin = data.data.belongAdmin;
                } catch (error) {
                    console.log('给用户无理赔订单')
                }
            },
            // 根据理赔id删除理赔订单
            async delClaim(_id) {
                const {
                    data
                } = await this.$apis.claimApi.delCompensation({
                    _id
                });
                // console.log(data);
                if (data.status) {
                    alert("删除成功");
                } else alert("删除失败");
            },
        },
    }
}
</script>

<style scoped>
@import "../../assets/scss/public/sector.scss";

#box {
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box-card {
    margin-top: 5%;
}

.text {
    font-size: 14px;
    width: 300px;
}

.text-right {
    width: 150px;
    text-align: right;
}

.text-left {
    width: 220px;
    text-align: left;
}

.item {
    padding: 18px 0;
    display: flex;
    justify-content: space-around;
}

.box-card {
    width: 480px;
}

.bottom {
    display: flex;
    justify-content: space-around;
}
</style>
